<template>
  <section class="w3l-bottom-grids-6 py-5">
    <div class="container py-lg-5 py-md-4">
      <span class="subhny-title text-center mb-2">在线订购</span>
      <h3 class="hny-title text-center mb-5">我们的服务是如何运作的？</h3>
      <div class="grids-area-hny main-cont-wthree-fea row">
        <FeatureCard
          icon="fa-mobile"
          title="卤味在线点餐"
          description="享受快捷的在线点餐服务，随时随地选择你喜欢的卤味。" />
        <FeatureCard
          icon="fa-gift"
          title="卤味外送服务"
          description="我们的外送服务让你在家也能品尝到新鲜美味的卤味。"
          active />
        <FeatureCard
          icon="fa-building-o"
          title="自驾餐厅"
          description="在我们的自驾餐厅，享受美食带来的乐趣。" />
      </div>
    </div>
  </section>
  <section class="w3l-grids-3 py-5">
    <div class="container py-lg-5 py-md-4">
      <div class="row bottom-ab-grids">
        <div class="col-lg-6 bottom-ab-left pr-lg-5">
          <span class="subhny-title mb-2">比光更快</span>
          <h3 class="hny-title mb-4">给你的胃带来新选择</h3>
          <p>
            我们的卤味新鲜美味，带给你无与伦比的享受。
            选择我们的产品，体验真正的美味之旅。
          </p>
          <ul class="cont-4 mt-4">
            <li>
              <span class="fa fa-check"></span>
              新鲜的食材，口感独特
            </li>
            <li>
              <span class="fa fa-check"></span>
              快捷的在线订购，轻松下单
            </li>
            <li>
              <span class="fa fa-check"></span>
              精选配方，传承经典
            </li>
          </ul>
          <a href="about.html" class="btn btn-style btn-primary mt-lg-5 mt-4">
            了解更多
            <span class="fa fa-chevron-right"></span>
          </a>
        </div>
        <div class="col-lg-6 bottom-right-grids mt-lg-0 mt-5">
          <img
            src="@/assets/images/pic3.png"
            alt="卤味美食"
            class="img-fluid" />
        </div>
      </div>
    </div>
  </section>
  <section class="w3l-stats py-lg-5 py-4" id="stats">
    <div class="container py-md-5 py-4">
      <span class="subhny-title mb-2 text-center">美味即享</span>
      <h3 class="hny-title mb-md-4 mb-2 text-center">
        让我们的预制菜为您的生活增添色彩
      </h3>
      <div class="row stats-con">
        <div class="col-lg-4 col-md-6 stats_info counter_grid">
          <p class="counter">35+</p>
          <h4>35种独特的卤味产品供您选择</h4>
        </div>
        <div class="col-lg-4 col-md-6 stats_info counter_grid1">
          <p class="counter">500+</p>
          <h4>超过500次客户满意的美食体验</h4>
        </div>
        <div class="col-lg-4 col-md-6 stats_info counter_grid mt-md-0 mt-5">
          <p class="counter">26+</p>
          <h4>26年行业经验，传承经典口味</h4>
        </div>
      </div>
    </div>
  </section>

  <section class="w3l-features py-5" id="work">
    <div class="call-w3 py-lg-5 py-md-4">
      <div class="container">
        <div class="row main-cont-wthree-2">
          <div class="col-lg-5 feature-grid-left pr-lg-5">
            <span class="subhny-title mb-2">为您提供最佳的预制菜体验</span>
            <h3 class="hny-title mb-md-4 mb-2">坐在家里，享受我们的卤味</h3>
            <p class="text-para">
              我们的卤味采用新鲜食材，方便快捷，助您轻松享受美味生活。
            </p>
            <a href="#url" class="btn btn-primary btn-style mt-lg-5 mt-4">
              了解更多
            </a>
          </div>
          <div class="col-lg-7 feature-grid-right mt-lg-0 mt-5">
            <div class="call-grids-w3 d-grid">
              <FeatureItem icon="fa-leaf" title="新鲜食材，口感一流" />
              <FeatureItem icon="fa-check-circle" title="品质保证，放心享用" />
              <FeatureItem icon="fa-th-list" title="多样选择，适合各类口味" />
              <FeatureItem icon="fa-gift" title="精美包装，送礼自用皆宜" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class="w3l-content-with-photo-4">
    <div class="content-photo-info py-5">
      <div class="container py-md-5">
        <div class="content-photo-grids row">
          <div
            class="photo-6-inf-right col-lg-7 text-left pr-lg-5 mb-lg-0 mb-5">
            <span class="subhny-title mb-2">轻松多平台下单</span>
            <h3 class="hny-title mb-md-4 mb-2">
              随时随地，轻松选择您喜爱的口味。
            </h3>
            <p class="mt-3 pr-lg-5">
              我们定期推出新菜品，带给您更多惊喜！
            </p>
            <div class="servehny-1">
              <div class="ser-sub">
                <a href="#link" class="ser1">
                  <span class="fa fa-check"></span>
                  随时随地，轻松选择您心仪的美味。
                </a>
                <a href="#link" class="ser1">
                  <span class="fa fa-check"></span>
                  多样选择，满足不同的味蕾需求。
                </a>
                <a href="#link" class="ser1">
                  <span class="fa fa-check"></span>
                  不断推出新菜品，期待您的尝鲜体验！
                </a>
              </div>
            </div>
            <div class="read-buttons mt-lg-5">
              <a class="btn btn-outline-primary btn-style mr-2" href="#">
                <span class="fa fa-play-circle-o mr-2"></span>
                <span class="prim_text">立即下载</span>
              </a>
              <a class="btn btn-primary btn-style" href="#">
                <span class="fa fa-apple mr-2"></span>
                <span class="prim_text">获取优惠券</span>
              </a>
            </div>
          </div>
          <div
            class="photo-6-inf-left col-lg-5 pr-lg-4 text-lg-right text-center">
            <a href="#">
              <img
                src="@/assets/images/pic4.png"
                class="img-fluid"
                alt="卤味食品" />
            </a>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="w3l-clients-1" id="testimonials">
    <!-- /grids -->
    <div class="cusrtomer-layout py-5">
      <div class="container py-md-4">
        <div class="heading align-self text-center">
          <span class="subhny-title mb-2">Testimonials</span>
          <h3 class="hny-title mb-md-4 mb-2">Story of our customers</h3>
        </div>
        <!-- /grids -->
        <div class="testimonial-row">
          <div
            id="owl-demo1"
            class="owl-two owl-carousel owl-theme mb-md-3 mb-sm-5 mb-4">
            <div class="item">
              <div class="testimonial-content">
                <div class="testimonial">
                  <div class="test-img">
                    <img
                      src="@/assets/images/team1.jpg"
                      class="img-fluid"
                      alt="client-img" />
                  </div>
                  <blockquote>
                    <q>
                      Lorem ipsum dolor sit amet int consectetur adipisicing
                      elit. Velita beatae laudantium Quas minima sunt natus
                      tempore, maiores aliquid modi felis vitae facere aperiam
                      sequi optio lacinia id ipsum non velit, culpa. voluptate
                      rem ullam dolore nisi est quasi, doloribus tempora.
                    </q>
                  </blockquote>
                  <div class="testi-des">
                    <div class="peopl align-self">
                      <h3>Gloria Parker</h3>
                      <p class="indentity">Customer</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="testimonial-content">
                <div class="testimonial">
                  <div class="test-img">
                    <img
                      src="@/assets/images/team2.jpg"
                      class="img-fluid"
                      alt="client-img" />
                  </div>
                  <blockquote>
                    <q>
                      Lorem ipsum dolor sit amet int consectetur adipisicing
                      elit. Velita beatae laudantium Quas minima sunt natus
                      tempore, maiores aliquid modi felis vitae facere aperiam
                      sequi optio lacinia id ipsum non velit, culpa. voluptate
                      rem ullam dolore nisi est quasi, doloribus tempora.
                    </q>
                  </blockquote>
                  <div class="testi-des">
                    <div class="peopl align-self">
                      <h3>Tommy sakura</h3>
                      <p class="indentity">Customer</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="testimonial-content">
                <div class="testimonial">
                  <div class="test-img">
                    <img
                      src="@/assets/images/team3.jpg"
                      class="img-fluid"
                      alt="client-img" />
                  </div>
                  <blockquote>
                    <q>
                      Lorem ipsum dolor sit amet int consectetur adipisicing
                      elit. Velita beatae laudantium Quas minima sunt natus
                      tempore, maiores aliquid modi felis vitae facere aperiam
                      sequi optio lacinia id ipsum non velit, culpa. voluptate
                      rem ullam dolore nisi est quasi, doloribus tempora.
                    </q>
                  </blockquote>
                  <div class="testi-des">
                    <div class="peopl align-self">
                      <h3>Bruce Bailey</h3>
                      <p class="indentity">Customer</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="testimonial-content">
                <div class="testimonial">
                  <div class="test-img">
                    <img
                      src="@/assets/images/team4.jpg"
                      class="img-fluid"
                      alt="client-img" />
                  </div>
                  <blockquote>
                    <q>
                      Lorem ipsum dolor sit amet int consectetur adipisicing
                      elit. Velita beatae laudantium Quas minima sunt natus
                      tempore, maiores aliquid modi felis vitae facere aperiam
                      sequi optio lacinia id ipsum non velit, culpa. voluptate
                      rem ullam dolore nisi est quasi, doloribus tempora.
                    </q>
                  </blockquote>
                  <div class="testi-des">
                    <div class="peopl align-self">
                      <h3>Ruth Edwards</h3>
                      <p class="indentity">Customer</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- /grids -->
    </div>
    <!-- //grids -->
  </section>
</template>
<script setup>
import { onMounted } from "vue";
import FeatureCard from "./component/FeatureCard.vue";
import FeatureItem from "./component/FeatureItem.vue";
// onMounted(() => {
//   $("#owl-demo1").owlCarousel({
//     loop: true,
//     margin: 20,
//     nav: false,
//     responsiveClass: true,
//     responsive: {
//       0: {
//         items: 1,
//         nav: false,
//       },
//       1000: {
//         items: 1,
//         nav: false,
//         loop: false,
//       },
//     },
//   });
// });
</script>
